<!--实现添加分类，编辑，删除功能-->
<template>
    <div>
      <el-dialog
          title="添加分类"
          v-model="addDialogVisible"
          width="30%" @open="parentData" @close="dataDialogClose">
        <el-form label-position="left" :model="addForm" ref="addDataRef">
          <el-form-item label="分类名称">
            <el-input v-model="addForm.cat_name" placeholder="请输入分类名称"></el-input>
          </el-form-item>
          <el-form-item label="父级分类">
            <el-cascader
                v-model="selectedOptions2"
                :options="parentList"
                :props="caseCaderProps"
                @change="parentCateChange"  ></el-cascader>
          </el-form-item>
        </el-form>
        <template #footer>
    <span class="dialog-footer">
      <el-button @click="addDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addNewData">确 定</el-button>
    </span>
        </template>
      </el-dialog>
<!--      编辑功能实现-->
      <el-dialog
          title="修改信息"
          v-model="changeDialogVisible"
          width="30%" @open="searchData">
        <el-form label-position="left" >
          <el-form-item label="分类名称">
            <el-input v-model="catName" placeholder="请输入分类名称" ></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
    <span class="dialog-footer">
      <el-button @click="changeDialogVisible = false">取 消</el-button>
      <slot name="add">
      <el-button type="primary" @click="changeData">确 定</el-button>
      </slot>
    </span>
        </template>
      </el-dialog>
    </div>
</template>

<script>
import {request} from "../../../network/axios";
import {ElMessage} from "element-plus";

export default {
  name: "DataChange",
  data(){
    return{
      addDialogVisible :false,
      changeDialogVisible :false,
      id:'',
      id2:'',
      catName:'',
      catName2:'',
      cat_deleted:'',
      selectedOptions2:[],
      addForm:{
        cat_name:'',
        cat_pid:'0',
        cat_level:'0'
      },
      parentList:[],
      caseCaderProps:{
        value:'cat_id',
        label:'cat_name',
        children:'children'
      }
    }
  },
  methods:{
    parentData(){
      this.getParentList()
    },
    //获取父级分类数据
    getParentList(){
      request({
        url:`categories`,
        method:'get',
        params:{type:2}
      }).then(res=>{
        console.log(res.data.data);
        this.parentList = res.data.data
      })
    },
    parentCateChange(){
      console.log(this.selectedOptions2)
      //如果length大于0则选中了父级
      if(this.selectedOptions2.length>0){
        //获取最后一级父级的id
        this.addForm.cat_pid = this.selectedOptions2[this.selectedOptions2-1]
        //数组的长度就是当前分类的层次 0 一级 1 二级 2 三级
        this.addForm.cat_level = this.selectedOptions2.length
      } else{
          this.addForm.cat_pid = 0
          this.addForm.cat_level = 0
      }
    },
    //添加新的数据
    addNewData(){
      request({
        url:`categories`,
        method:'post',
        data:this.addForm
      }).then(res=>{
        console.log(res)
        if(res.status!==200) ElMessage.error("添加失败")
        ElMessage.success("添加成功")
        //关闭对话框
        this.addDialogVisible = false
        //重新刷新
        this.$parent.getCateData()
      })
    },
    //重置添加数据表单
    dataDialogClose(){
      this.addForm.cat_name = ''
    },
    //查询数据
    searchData(){
      request({
        url:`categories/${this.id}`,
        method:'get',
        params:this.id
      }).then(res=>{
        this.catName = res.data.data.cat_name
      })
    },
    //修改数据
    changeData(){
      request({
        url:`categories/${this.id}`,
        method:'put',
        data:{
          id:this.id,
          cat_name:this.cat_name
        }
      }).then(res=>{
        if(res.status !== 200) ElMessage.error("修改失败")
        ElMessage.success("修改成功")
        this.$parent.getCateData()
      })
    },
    //删除数据
    deleteData(){
      request({
        url:`categories/${this.id2}`,
        method:'delete',
        data:this.id2
      }).then(()=>{
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          ElMessage.success("删除成功")
          //重新刷新
          this.$parent.getCateData()
        }).catch(() => {
              ElMessage.info("删除失败")
            }
        )
      })
    }
  }
}
</script>

<style scoped>

</style>